import React, { useEffect, useState, useRef } from 'react'



// 思路
// 定义两个state:
// canSend: 初始为true，倒计时期间为false，绑定给按钮的 disabled属性
// count： 初始为0，点击按钮之后count置为60，绑定给文字
// 点击按钮之后：
// canSend改成false
// 开启定时器setInterval
// #基本实现
export default function UseTimeCom () {

    const [count, setCount] = useState(0)
    const [canSend, setCanSend] = useState(true)
    const timerId = useRef(null)


    const send = () => {
        setCanSend(false)
        setCount(5)

        timerId.current = setInterval(() => {
            setCount((count) => count - 1)
        }, 1000)

    }

    useEffect(() => {
        // console.log(count)
        if (count === 0) {
            setCanSend(true)
            //  清除定時器
            clearInterval(timerId.current)
        }
        return () => { }


    }, [count])

    return (
        <div>UseTimeCom

            <div>
                <button disabled={!canSend} onClick={send}>
                    {canSend ? '发送验证码' : count + '秒之后再发送'}
                </button>
            </div>

        </div>
    )
}
